<template>
  <div class="hm-friends-list">
    <div class="firendClass">
      <div class="hd">
        <text class="friendsList">{{ options.friendsList }}</text>
        <image class="img" :src="options.img" />
      </div>
      <div class="bd">
				
				<view class="btnjiajian" v-for="(item,index) in options.list">
					<view class="text">{{item.text}}</view>
					<view class="Curtain">
						<div class="col1" >
						  <!-- <image class="avator" :src="item.avator" /> -->
							<button class="btn play-pause avator btnja" @tap="btncontrallor(index,1)">
								<image class="btnicon" src="/static/icon/jia.png"></image>
							</button>
							<text class="miller">开</text>
						</div>
						
						<div class="col1" style="margin-top: 7px;" >
						  <!-- <image class="avator" :src="item.avator" /> -->
							<button class="btn play-pause avator" @tap="btncontrallor(index,2)">
								<image class="btnicon" src="/static/icon/airleng.png"></image>
							</button>
							<text class="miller">暂停</text>
						</div>
						
						<div class="col1" style="margin-top: 7px;">
						  <!-- <image class="avator" :src="item.avator" /> -->
							<button class="btn play-pause avator btnjian" @tap="btncontrallor(index,3)">
								<image class="btnicon" src="/static/icon/jia.png"></image>
							</button>
							<text class="miller">关</text>
						</div>
					</view>
					<!-- <view class="text">窗纱</view>
					<view class="Curtain">
						<div class="col1" >
							<button class="btn play-pause avator btnja" @tap="btncontrallor(1,4)">
								<image class="btnicon" src="/static/icon/jia.png"></image>
							</button>
							<text class="miller">开</text>
						</div>
						
						<div class="col1" >
							<button class="btn play-pause avator" @tap="btncontrallor(1,5)">
								<image class="btnicon" src="/static/icon/airleng.png"></image>
							</button>
							<text class="miller">暂停</text>
						</div>
						
						<div class="col1" >
							<button class="btn play-pause avator btnjian" @tap="btncontrallor(1,6)">
								<image class="btnicon" src="/static/icon/jia.png"></image>
							</button>
							<text class="miller">关</text>
						</div>
					</view> -->
					
				</view>
        
      </div>
      
    </div>
  </div>
</template>
<script>
export default {
  name: 'HmFriendsList',
  props: {
    dataId: {
      type: String,
      default: 'hm-friends-list'
    },
    options: {
      type: Object,
      default: function() {
        return {
          friendsList: '朋友表',
          list:[
						{
							avator:"/static/icon/kongtiao.png",
							text:"张三"
						},
						{
							avator:"/static/icon/kongtiao.png",
							text:"张三"
						}
					]
        };
      }
    }
  },
  data() {
    return {};
  },
  methods: {
		btncontrallor(count,item){
			this.$parent.btnclick(count,item);
			
		}
	}
};
</script>
<style>
@import './index.response.css';
.btnja{
	border-radius: 25rpx;
	border-bottom-right-radius:0;
	border-top-right-radius:0;
	height: 125rpx;
}

.btnja ::after,.btnja ::before{
	border-radius: 25rpx !important;
	border-bottom-right-radius:0 !important;
	border-top-right-radius:0 !important;
	height: 125rpx !important;
}
.btnjian{
	border-radius: 25rpx;
	border-bottom-left-radius:0;
	border-top-left-radius:0;
	height: 125rpx;
}
.btnjian{
	box-shadow: -4px 4px -15px rgba(0, 0, 0, 0.15)
}

/* .btnjian image{
	width: 40rpx;
	height: 40rpx;
	margin-top: 27px;
} */
.btnjiajian{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding-top: 22px;
}
.btnjiajian-yuan{
	display: flex;
	/* flex-direction: column; */
	justify-content: space-between;
	padding-top: 10rpx;

}
.btnjiajian .cll1{
	width: auto;
}
.btnother{
	display: flex;
	justify-content: space-between;
	padding-top: 40rpx;

}
.Curtain{
	display: flex;
	
}
.btnjiajian .text{
	font-size: 34rpx;
	margin-bottom: 20rpx;
	padding-left: 20rpx;
	color: #8e8e99;

}
</style>
